<template>
	<!-- yjy Waterfall flow 瀑布流 -->
	<!-- yjy-wtftl -->
	<view>
		<!-- 瀑布流布局列表 -->
		<view class="pubuBox">
			<view class="pubuItem" v-for="(item, itemIndex) in sellGoodsList" :key="itemIndex"
				@click="navigateToProductDetail(item.id)">
				<image :src="item.firstImgUrl" mode="aspectFill"></image>
				<view class="listtitle">
					<view class="listtitle1">{{ item.info }}</view>
					<view class="listtitle2">
						<text class="listtitle2son">￥</text>
						{{ item.price }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sellGoodsList: [],
				region: 0,
				groupNum: 0,
				groupApi: ['vipGoods', 'popularityGoods', 'firstGoods'],
				currentPage: 1,
				pageSize: 10,
				isLoading: false,
				loadedAll: false
			}
		},
		async created() {
			console.log('瀑布流组件yjy-wtffl执行created');
			const app = getApp();
			let thisPage = this;
			const upResult = await uni.request({
				url: app.globalData.api + "/home/" + thisPage.groupApi[thisPage.groupNum],
				method: 'GET',
				data: {
					region: 0,
					currentPage: 1,
					pageSize: thisPage.pageSize,
				}
			});
			thisPage.sellGoodsList = upResult.data.data;
			console.log('首页瀑布流数据加载完成');
			console.log(upResult);
		},
		methods: {
			//弹出已经加载了全部
			popLoadedMsg(){
				this.loadedAll = true
				uni.showToast({
					title: '已加载全部',
					icon: 'none'
				})
			},
			
			async loadMore() {
				console.log('loadMore函数执行')
				if (this.isLoading === false && this.loadedAll === false) {
					this.isLoading = true
				} else {
					console.log('正在加载或已加载全部，退出return')
					return
				} //防止多次调用
				const app = getApp();
				let thisPage = this;
				//这里地区 region和 组 group
				const region = thisPage.region
				const group = thisPage.groupNum
				const upResult = await uni.request({
					url: app.globalData.api + "/home/" + thisPage.groupApi[group],
					method: 'GET',
					data: {
						region: region,
						currentPage: (thisPage.currentPage + 1),
						pageSize: thisPage.pageSize
					}
				});
				thisPage.currentPage++
				if (upResult.data.data.length === 0) {
					
					console.log('已加载全部')
					// this.loadedAll = true
					thisPage.popLoadedMsg()
					this.isLoading = false
					return
				}
				console.log('loadMore拉取请求结果为：')
				console.log(upResult.data.data)
				thisPage.sellGoodsList = thisPage.sellGoodsList.concat(upResult.data.data)
				this.isLoading = false
			},

			async showChanged(targetRegion, targetGroup) {
				this.loadedAll = false
				const app = getApp();
				let thisPage = this;
				thisPage.region = targetRegion;
				thisPage.groupNum = targetGroup;
				thisPage.currentPage = 1
				const upResult = await uni.request({
					url: app.globalData.api + "/home/" + thisPage.groupApi[targetGroup],
					method: 'GET',
					data: {
						region: targetRegion,
						currentPage: 1,
						pageSize: thisPage.pageSize
					}
				});
				thisPage.sellGoodsList = upResult.data.data;
			},
			navigateToProductDetail(productId) {
				uni.navigateTo({
					url: '/pages/goods-details/goods-details?id=' + productId,
					success: function() {
						console.log(productId);
					}
				});
			},
		},
	}
</script>

<style scoped="scoped" lang="scss">
	page {
		background-color: #eee;
		height: 100%;
	}

	.pubuBox {
		padding: 25rpx;
	}



	.pubuItem {
		padding: 0rpx;
		margin: 5rpx;
		width: 340rpx;
		display: inline-block;
		box-sizing: border-box;
		border-radius: 15rpx;
		overflow: hidden;
		background-color: #fff;
		box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
	}

	.pubuItem image {
		width: 100%;
		height: 200rpx;
		border-radius: 10rpx;
	}

	//图片下面的盒子
	.listtitle {
		padding: 22rpx;
		font-size: 24rpx;
	}


	// 商品info
	.listtitle1 {
		line-height: 39rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-line-clamp: 2;
		line-clamp: 2;
		// -webkit-box-orient: vertical;
		min-height: 39rpx;
		max-height: 78rpx;
	}

	//商品价格
	.listtitle2 {
		color: #a9161f;
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: bold;
		padding-top: 22rpx;
	}

	.listtitle2son {
		font-size: 32rpx;
	}
</style>